<template>
  <view class="default-layout">
    <view class="bg-white px-2">
      <slot />
    </view>
    <view>
      <wd-tabbar
        fixed
        v-model="tabbarIndex"
        shape="round"
        safeAreaInsetBottom
        placeholder
        @change="changePage"
      >
        <wd-tabbar-item
          v-for="(item, index) in tabbarItems"
          :key="index"
          :value="item.value"
          :title="item.title"
          :icon="item.icon"
        ></wd-tabbar-item>
      </wd-tabbar>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useTabbarIndexStore } from '@/store/tabbarIndex'
const { tabbarIndex, setTabbarIndex } = useTabbarIndexStore()

interface TabbarItem {
  value: number
  title: string
  icon: string
}

const tabbarItems = ref<TabbarItem[]>([
  { value: 0, title: '首页', icon: 'home' },
  { value: 0, title: '消息', icon: 'view-list' },
  { value: 0, title: '咨询', icon: 'chat1' },
  { value: 0, title: '我的', icon: 'user' },
])
const tabbarRoutes = ref([
  '/pages/index/index',
  '/pages/index/message',
  '/pages/index/consult',
  '/pages/index/profile',
])

function changePage({ value }: { value: string }) {
  console.log('点击了' + value + typeof value)
  const index = Number(value)
  setTabbarIndex(index)
  uni.reLaunch({
    url: tabbarRoutes.value[index],
  })
}
</script>

<style lang="scss">
.default-layout {
  height: 100vh;
  overflow: auto;
  background-color: #fafafa;
}
</style>
